@import '../mixins.less';

.btn {
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border-radius: 7px;

    #btn-small();
    #btn-normal();
    #btn-large();
    #btn-huge();
    &.btn-block {
        display: block;
        text-align: center;
    }
    &.btn-rect {
        border-radius: 0;
    }
}

.fixed-btn-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.absolute-btn-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

#btn-mobile(custom, primary, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%));
#btn-mobile(custom, oldprimary, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @oldprimary-color, darken(@oldprimary-color, 15%), lighten(@oldprimary-color, 15%));
#btn-mobile(custom, white, @black-color, darken(@black-color, 15%), lighten(@black-color, 15%), @white-color, darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, oldwhite, @oldprimary-color, darken(@oldprimary-color, 15%), lighten(@oldprimary-color, 15%), @white-color, darken(@white-color, 15%), lighten(@white-color, 15%));
// #btn-mobile(custom, white, @black-color, darken(@black-color, 15%), lighten(@black-color, 15%), @white-color, darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, red, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @color-red, darken(@color-red, 15%), @color-font-4);
#btn-mobile(custom, blue, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @color-blue, darken(@color-blue, 15%), lighten(@color-blue, 15%));
#btn-mobile(custom, rev-primary, @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%), @white-color, darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, system-pill, #000, #000, #000, fade(@white-color, 60%), darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, green, @white-color, @white-color, @white-color, green, green, green);
#btn-mobile(custom, wx-green, @white-color, @white-color, @white-color, @wx-green-color, @wx-green-color, @wx-green-color);
#btn-mobile(custom, transparent, @first-font-color, darken(@first-font-color, 15%), lighten(@first-font-color, 15%), @white-color,darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, wathet, @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%), lighten(@primary-color, 45%), lighten(@primary-color, 45%), lighten(@primary-color, 45%));
#btn-mobile(custom, grey, #9B9B9B, darken(#F5F7FA, 15%), lighten(#101010, 15%), #FFFFFF, darken(#FFFFFF, 15%), lighten(#F5F7FA, 15%));
#btn-mobile(custom, primary-transparent, @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%), transparent, transparent, transparent);
#btn-mobile(custom, primary-white, @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%), @white-color, darken(@white-color, 15%), lighten(@white-color, 15%));
#btn-mobile(custom, white-primary, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @primary-color, darken(@primary-color, 15%), lighten(@primary-color, 15%));
#btn-mobile(custom, white-red, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @color-red, darken(@color-red, 15%), #ccc);
#btn-mobile(custom, blue-white, @white-color, darken(@white-color, 15%), lighten(@white-color, 15%), @color-blue, darken(@color-blue, 15%), lighten(@color-blue, 15%));
#btn-mobile(custom, red-transparent, @color-red, darken(@color-red, 15%), lighten(@color-red, 15%), transparent, transparent, transparent);
#btn-mobile(custom, red-grey, @color-red, darken(@color-red, 15%), lighten(@color-red, 15%), @color-font-5, darken(@color-font-5, 15%), lighten(@color-font-5, 15%));
#btn-mobile(custom, spec, @color-font-1, @color-white, @color-white, @color-default-bg, @color-red, @color-default-bg);
#btn-mobile(custom, white-yellow, @color-white, @color-white, @color-white, @color-yellow, darken(@color-yellow, 15%), lighten(@color-yellow, 15%));
#btn-mobile(custom, gold-black, @color-gold, @color-gold, @color-gold, @color-black, darken(@color-black, 15%), lighten(@color-black, 15%));

.btn.btn-mobile {
    &.btn-system-pill {
        min-width: 88rpx;
    }
    &.primary-border {
        border: 1px solid @primary-color;
    }
    &.border-primary {
        border: 1px solid @color-primary;
    }
    &.oldprimary-border {
        border: 1px solid @oldprimary-color;
    }
    &.black-border {
        border: 1px solid @black-color;
    }
    &.red-border {
        border: 1px solid @color-red;
    }
    &.grey-border {
        border: 1px solid @grey-color;
    }
    &.white-border {
        border: 1px solid @white-color;
    }
    &.transparent-border {
        border: 1px solid transparent;
    }
    &.third-border {
        border: 1px solid @third-font-color;
    }
    &.fourth-border {
        border: 1px solid @fourth-font-color;
    }
    &.fifth-border {
        border: 1px solid @fifth-font-color;
    }
    &.system-pill-border {
        border: 1rpx solid #eee;
    }
    &.box-shadow {
        box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.3);
    }
    &.bold-border {
        border-width: 2px;
    }
    &.transparent-border {
        border: 1rpx solid #bbbbbb;
    }
    &.wathet-border {
        border: 1rpx solid @primary-color;
    }
}
